<template>
  <polyline
    class="mx-marker-polyline"
    :class="{'is-hover': isHover}"
    @mouseover="setHover(true)"
    @mouseout="setHover(false)"
    @mouseup="onOpen"
    @touchend="onOpen"
    :points="currentPoints"
    :style="currentStyle">
  </polyline>
</template>

<script>
import common, {
  GetPolygonAreaCenter,
  Emitter,
  ComponentName,
  EventName
} from "../common.js";
import _ from "lodash";

export default {
  componentName: ComponentName.marker,
  mixins: [Emitter],
  props: {
    name: {},
    layer: {},
    sources: {},
    prop: {},
    map: {},
    show: {},
    activeLayerList: {}
  },
  data() {
    return {
      isHover: false,
      currentPoints: "",
      currentCenterPosition: null
    };
  },
  computed: {
    currentPointList() {
      let points = _.get(this.prop, this.currentMarker.coordinate);
      points = common
        .case(points)
        .string(val => {
          let arr = val.split("&");
          return arr.map(item => item.split(","));
        })
        .array(val => {
          return val.map(item => {
            return typeof item === "object" ? [item.x, item.y] : item;
          });
        })
        .function(val => val.call(this, this.prop))
        .default([]);
      if (points[0]) points.push(points[0]);
      return points;
    },
    currentCenterPoint() {
      return GetPolygonAreaCenter(this.currentPointList);
    },
    currentMarker() {
      return this.layer.marker || {};
    },
    currentState() {
      if (this.currentMarker.rule) {
        return this.currentMarker.rule.call(this, this.prop);
      } else {
        return null;
      }
    },
    currentNormalStyle() {
      let style = this.currentMarker.normalStyle
      let state = this.currentState
      if (!style || typeof style === "string" || state === null || state === undefined) return style
      style = style[state]
      return typeof style === "function" ? style.call(this, this.prop) : style;
    },
    currentHoverStyle() {
      let style = this.currentMarker.hoverStyle
      let state = this.currentState
      if (!style || typeof style === "string" || state === null || state === undefined) return style
      style = style[state]
      return typeof style === "function" ? style.call(this, this.prop) : style;
    },
    currentStyle() {
      return this.isHover ? this.currentHoverStyle : this.currentNormalStyle;
    }
  },
  created() {
    this.updatePosition();
    this.$on(EventName.updatePosition, this.updatePosition);
    this.$emit("created", this);
  },
  methods: {
    onOpen(e) {
      if (this.map.isDragging || this.layer.infoWindow === false) return
      let options = {
        prop: this.prop,
        point: this.currentCenterPoint,
        name: this.name,
        layer: this.layer
      }
      if (typeof this.layer.infoWindow === 'function') {
        this.layer.infoWindow.call(this, options)
      } else {
        this.dispatch(ComponentName.map, EventName.openInfoWindow, options)
      }
    },
    updatePosition() {
      if (!this.show) return;
      this.currentPoints = this.currentPointList
        .map(item => {
          let point = this.map.pointToSvgPixel(item[0], item[1]);
          return `${point.x},${point.y}`;
        })
        .join(" ");
      this.currentCenterPosition = this.map.pointToPixel(
        ...this.currentCenterPoint
      );
    },
    setHover(flag) {
      this.isHover = flag;
      if (this.$el.parentNode && flag) {
        this.$el.parentNode.appendChild(this.$el)
      }
    }
  },
  watch: {
    show(val) {
      this.updatePosition();
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
.mx-marker-polyline {
  fill-opacity: 0.65;
  stroke-opacity: 1;
  cursor: pointer;
  user-select: none;
  stroke: #ff6319;
  fill: rgba(95, 184, 144, 0.5);
  stroke-width: 4;

  &.is-hover {
    z-index: 100;
    stroke: #ff0000;
    stroke-dasharray: 5, 5, 25, 5;
  }
}
</style>
